import {messages} from "share/common";
import React from 'react'

import {Input, message, Form, Button, Alert} from 'antd'
import 'styles/financial-management/scan-gun-view.scss'
import menuRoute from 'routes/menuRoute'
import { scan } from './scan-gun-view.service'
import WaterMark from "components/water-mark";
import openSlideFrame from "share/openSlideFrame";
import errorMessage from "share/errorMessage";

class Index extends React.Component {

  financeView = menuRoute.getRouteItem('finance-view-expense');
  corporateView = menuRoute.getRouteItem('corporate-payment-report-view');
  state = { inputValue: '', pageFrom: '' };

  componentDidMount(){
    let pageFrom = this.props.params && this.props.params.pageFrom;
    this.setState({ pageFrom });
    this.input.focus();
  }

  handlePressEnter = (e) => {
    let params = {
      code: e.target.value,
      operate: 'WEB_CHECK_BILL',
      autoIdentify: true
    };
    scan(params).then(res => {
      if(res.data.success) {
        //entityType: 报销单(1002),借款单(3001),发票袋(5001)
        let entityType = res.data.entityType;
        let entityOid = res.data.entityOid;
        //对公支付单
        if(res.data.corporateFlag) {
          this.input.blur();
          openSlideFrame.openCorporateReportDetail({
            expenseReportOID: entityOid,
            entry: 'view'
          }, {
            noPadding: true,
            className: 'corporate-payment-report-detail'
          }, this);
          this.setState({inputValue: ''});
          return;
        }
        // 单据为报销单 或者发票袋
        if(entityType === 1002 || entityType === 5001) {
          this.input.blur();
          openSlideFrame.openExpenseReport({
            expenseReportOID: entityOid,
            pageFrom: 'scan-gun-view',
            entry: 'view'
          }, {
            afterClose: () => {
              setTimeout(() => this.input.focus(), 200);
            }
          }, this);
          this.setState({inputValue: ''});
          return;
        }
      } else {
        message.warn(res.data.msg || messages('expense-1.key665')/*跳转失败，请手动查看详情*/);
        this.setState({inputValue: ''});
        this.input.focus();
      }
    }).catch(err => {
      errorMessage(err.response);
      this.setState({inputValue: ''});
      this.input.focus();
    })
  };

  handleClickSwitch = () => {
    const { pageFrom } = this.state;
    this.context.router.push(pageFrom === 'vendorPayment' ? this.corporateView.url : this.financeView.url);
  };

  render(){
    const { inputValue, pageFrom } = this.state;
    return (
      <div className="scan-gun-view">
        <WaterMark style={{marginTop: -55}} />
        <div className="scan-gun-view-wrap">
          <div className="scan-gun-view-header">
            <Button type="primary" icon="layout" className="btn-change"
                    onClick={this.handleClickSwitch}>
              {pageFrom === 'vendorPayment' ?
                messages('finance-9.key104')/*对公支付单查看*/ :
                messages('expense-1.key638')/*报销单查看*/}
            </Button>
            <h1>{messages('expense-1.key637')/*扫码枪查看*/}</h1>
          </div>
          <div style={{position: 'relative'}}>
            <Input
              value={inputValue}
              onPressEnter={this.handlePressEnter}
              ref={input => this.input = input}
              onChange={e=> this.setState({inputValue: e.target.value})}
            />
            <p style={{
              color: '#8B93A7',
              marginTop: '8px'
            }}>
              {messages('expense-1.key666')/*若您扫码后提示单据不存在，或无法跳转至单据详情页，请尝试：1. 输入法切换至英文环境后再扫码；2. 确认您的扫码枪已设置回车后缀*/}
            </p>
          </div>
        </div>
      </div>
    )
  }

}

Index.contextTypes = {
  router: React.PropTypes.object
};

export default Index;
